<template>
  <div id="dataInterfaceManager">
    <el-col :style="{ margin: '5px 0px 10px 5px' }">
      <el-form ref="queryForm" :model="vQueryParams" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="接口编号:" prop="dataCode"><el-input v-model="vQueryParams.dataCode" placeholder="请输入接口编号" /></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接口名称:" prop="dataName"><el-input v-model="vQueryParams.dataName" placeholder="请输入接口名称,支持模糊查询" /></el-form-item>
          </el-col>
          <el-col :span="1"><el-button type="primary" @click="handlerQueryButtonClick()">查询</el-button></el-col>
          <el-col :span="1"><el-button @click="resetForm()">重置</el-button></el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-table :data="dataInterface.list" highlight-current-row="true" stripe max-height="300" @row-click="clickOnDataInterfaceRow" >
          <el-table-column type="index" fixed="left"/>
          <el-table-column label="接口名称" prop="dataName" fixed="left"/>
          <el-table-column label="接口编号" prop="dataCode" fixed="left"/>
          <el-table-column label="接口类型" prop="dataType" />
          <el-table-column label="备注" prop="description" />
        </el-table>
        <div class="block">
          <el-pagination
            ref="pageComponet"
            :page-sizes="[ 5, 15, 50]"
            :page-size="dataInterface.pageSize"
            :total="dataInterface.total"
            :current-page="dataInterface.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            background
            @current-change="handlerQueryButtonClick"
            @size-change="handlePageSizeChange"
          />
        </div>
      </el-row>
      <el-row>
        <el-tabs tab-position="top" closeable>
          <el-tab-pane :label="vTabNames[0]">
            <el-table :data="dataInterfaceParms" stripe>
              <el-table-column width="50pm" label="序号" prop="seq" />
              <el-table-column label="接口编号" prop="dataCode" />
              <el-table-column label="参数名" prop="paramName" />
              <el-table-column label="参数类型" prop="paramType" />
              <el-table-column label="描述" prop="paramDesc" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="vTabNames[1]">
            <el-table :data="dataInterSql"><el-table-column label="序号" prop="seq" /></el-table>
          </el-tab-pane>
          <el-tab-pane :label="vTabNames[2]">
            <el-table :data="dataInterRest"><el-table-column label="序号" /></el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import { getDatainterfacePageList, getDatainterfaceParmasPageList } from '@/api/systemconfig'
export default {
  data() {
    return {
      dataInterface: {},
      dataInterfaceParms: [],
      dataInterSql: [],
      dataInterRest: [],
      vTabNamesOrign: ['参数设置', 'SQL配置', 'Rest服务配置'],
      vTabNames: [],
      vQueryParams: {
        dataCode: null,
        dataName: null
      }
    }
  },
  computed: {},
  watch: {

  },
  mounted: {},
  methods: {
    queryData: function(currentPage, pageSize, queryParams) {
      this.dataInterfaceParms=[]
      return getDatainterfacePageList(currentPage, pageSize, queryParams)
    },
    handlerQueryButtonClick(currentPage) {
      this.dataInterface.pageNum = currentPage || 1
      this.dataInterface.pageSize = this.dataInterface.pageSize || 5
      this.$options.methods.queryData(this.dataInterface.pageNum, this.dataInterface.pageSize, this.vQueryParams).then(data => {
        this.dataInterface = data
      })
    },
    handlePageSizeChange(currentPageSize) {
      this.dataInterface.pageSize = currentPageSize
      this.$options.methods.queryData(this.dataInterface.pageNum | 1, currentPageSize, this.vQueryParams).then(data => {
        this.dataInterface = data
      })
      // this.$methodes.queryData(this.dataInterface.pageNum)
      // this.$refs.pageComponet.handleCurrentChange(this.dataInterface.pageNum)
    },
    clickOnDataInterfaceRow(row, column, event) {
      getDatainterfaceParmasPageList(1, 100, { dataCode: row.dataCode }).then(data => {
        this.vTabNamesOrign.forEach(
          (value, index) => {
            this.vTabNames[index] = value + '[' + row.dataCode + ']'
          }
        )
        this.vTabName1 = row.dataCode
        this.dataInterfaceParms = data.list
      })
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
    }

  }
}
</script>
